<template>
  <div>
    <a-tree
      v-if="treeData.length > 0"
      showIcon
      autoExpandParent
      :treeData="treeData"
      :selectedKeys="selectedKeys"
      :expandedKeys="expandedKeys"
      @select="onSelect"
    >
      <template #icon="{ selected }">
        <a-icon :style="selected ? 'color: blue' : ''" type="apartment" />
      </template>
    </a-tree>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { queryTreeList } from '/@/api/common/api';

  export default defineComponent({
    name: 'LeftDepart',
    emits: ['select'],
    setup(_, { emit }) {
      const treeData = ref([]);
      const selectedKeys = ref([]);
      const expandedKeys = ref([]);
      function onSelect(_2, e) {
        let record = e.node.dataRef;
        selectedKeys.value = [record.key];
        emit('select', record.id);
      }
      loadTree();
      async function loadTree() {
        let result = await queryTreeList();
        treeData.value = [];
        result.forEach((node) => initialNode(node));
      }
      function initialNode(node, level = 1) {
        //node.slots = { icon: 'icon' };
        if (level === 1) {
          treeData.value.push(node);
          expandedKeys.value.push(node.id);
        }
        if (node.children && node.children.length > 0) {
          for (const childNode of node.children) {
            initialNode(childNode, level + 1);
          }
        }
      }
      function clearSelected() {
        selectedKeys.value = [];
      }
      return {
        treeData,
        expandedKeys,
        selectedKeys,
        clearSelected,
        onSelect,
      };
    },
  });
</script>
<style scoped></style>
